<!DOCTYPE html>
<html>
<!-- Submitted from TestTWF Paris -->
  <head>
    <meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
    <title> CSS Transitions: Animatable CSS properties </title>
    <meta name="assert" content="Check that all animatable CSS properties are animatable and then accepted by the 'transition-property' property">
    <link rel="author" title="Daniel Glazman" href="mailto:daniel.glazman@disruptive-innovations.com">
    <link rel="help" href="http://www.w3.org/TR/css3-transitions/#transitions">
    <link rel="help" href="http://www.w3.org/TR/css3-transitions/#animatable-properties">
    <link rel="reviewer" title="Alan Stearns" href="mailto:stearns@adobe.com">

    <style type="text/css">
		
      html, body { margin: 0px; padding: 0px; }
		
      .w50vw { width: 50vw; )
      .h50vh { height: 50vh; }
      
      .w50vm { width: 50vm; }
      .h50vm { height: 50vm; }
    </style>

    <script src="/resources/testharness.js" type="text/javascript"></script>
    <script src="/resources/testharnessreport.js" type="text/javascript"></script>
    <link href="/resources/testharness.css" rel="stylesheet" type="text/css">

    <style type="text/css" id="newStyles"></style>
  </head>
  <body>
    <p>Check that all animatable CSS properties are animatable and
      then accepted by the 'transition-property' property.<br>
    </p>

    <p id="testP">THIS PROSE NEEDED FOR TEST ITSELF</p>

    <div id="log"></div><a href="transitions-animatable-properties-01.html" id="" title="transitions-animatable-properties-01">transitions-animatable-properties-01</a>

    <script type="text/javascript">
      var kANIMATABLE_CSS_PROPERTIES = [
          ["background-color",    "white",                      "rgb(0, 128, 0)",               "", false],
          ["background-position", "0px 0px",                    "100% 100%",                    "", false],
          ["border-color",        "white",                      "rgb(0, 128, 0)",               "", false],
          ["border-bottom-color", "white",                      "rgb(0, 128, 0)",               "", false],
          ["border-bottom-width", "0px",                        "10px",                         "border-style: solid; border-color: black", false],
          ["border-left-color",   "white",                      "rgb(0, 128, 0)",               "", false],
          ["border-left-width",   "0px",                        "10px",                         "border-style: solid; border-color: black", false],
          ["border-right-color",  "white",                      "rgb(0, 128, 0)",               "", false],
          ["border-right-width",  "0px",                        "10px",                         "border-style: solid; border-color: black", false],
          ["border-spacing",      "0px",                        "10px 15px",                    "", false],
          ["border-top-color",    "white",                      "rgb(0, 128, 0)",               "", false],
          ["border-top-width",    "0px",                        "10px",                         "border-style: solid; border-color: black", false],
          ["bottom",              "0px",                        "10px",                         "", false],
          ["clip",                "rect(0px, 0px, 10px, 10px)", "rect(10px, 10px, 20px, 20px)", "", false],
          ["color",               "white",                      "rgb(0, 128, 0)",               "", false],
          ["crop",                "rect(0px, 0px, 10px, 10px)", "rect(10px 10px 20px 20px)",    "", false],
          ["font-size",           "12pt",                       "32px",                         "", false],
          ["font-weight",         "400",                        "900",                          "", false],
          ["height",              "1em",                        "64px",                         "", false],
          ["left",                "0px",                        "10px",                         "", false],
          ["letter-spacing",      "1em",                        "64px",                         "", false],
          ["line-height",         "1em",                        "64px",                         "", false],
          ["margin-bottom",       "0px",                        "10px",                         "", false],
          ["margin-left",         "0px",                        "10px",                         "", false],
          ["margin-right",        "0px",                        "10px",                         "", false],
          ["margin-top",          "0px",                        "10px",                         "", false],
          ["max-height",          "0px",                        "10px",                         "", false],
          ["max-width",           "0px",                        "10px",                         "", false],
          ["min-height",          "0px",                        "10px",                         "", false],
          ["min-width",           "0px",                        "10px",                         "", false],
          ["opacity",             "0",                          "1",                            "", false],
          ["outline-color",       "white",                      "rgb(0, 128, 0)",               "", false],
          ["outline-offset",      "0px",                        "10px",                         "", false],
          ["outline-width",       "0px",                        "10px",                         "outline-style: solid; outline-style: black", false],
          ["padding-bottom",      "0px",                        "10px",                         "", false],
          ["padding-left",        "0px",                        "10px",                         "", false],
          ["padding-right",       "0px",                        "10px",                         "", false],
          ["padding-top",         "0px",                        "10px",                         "", false],
          ["right",               "0px",                        "10px",                         "", false],
          ["text-indent",         "0px",                        "10px",                         "", false],
          ["text-shadow",         "orange 0 -2px",              "rgb(0, 128, 0) 0px 2px 0px",   "", false],
          ["top",                 "0px",                        "10px",                         "", false],
          ["vertical-align",      "0px",                        "10px",                         "", false],
          ["visibility",          "visible",                    "hidden",                       "", true],
          ["width",               "0px",                        "10px",                         "", false],
          ["word-spacing",        "0px",                        "10px",                         "", false],
          ["z-index",             "1",                           "10",                          "", false]
      ];

      // page timeout
      var kTIMEOUT = 3000000;

      var p = document.getElementById("testP");
      var style = document.getElementById("newStyles");

      var testsIntermediate = [];
      var testsEnd = [];

      setup({timeout: kTIMEOUT});

      // create all the tests we need
      for (var i = 0; i < kANIMATABLE_CSS_PROPERTIES.length; i++) {
        testsIntermediate.push(async_test(kANIMATABLE_CSS_PROPERTIES[i][0] + " intermediate",
                                          { timeout: 2000, assert: "property " + kANIMATABLE_CSS_PROPERTIES[i][0] + " is animatable" }));
        testsEnd.push(async_test(kANIMATABLE_CSS_PROPERTIES[i][0] + " end",
                                          { timeout: 2000, assert: "property " + kANIMATABLE_CSS_PROPERTIES[i][0] + " has correct value after transition's end" }));
      }

      // getComputedStyle helper
      function gCS(aProperty)
      {
        return document.defaultView
               .getComputedStyle(p, "")
               .getPropertyValue(aProperty);
      }

      function Scheduler(aIndex)
      {
        if (aIndex >= kANIMATABLE_CSS_PROPERTIES.length) // we're done here
          return;

        var property   = kANIMATABLE_CSS_PROPERTIES[aIndex][0];
        var startValue = kANIMATABLE_CSS_PROPERTIES[aIndex][1];
        var endValue   = kANIMATABLE_CSS_PROPERTIES[aIndex][2];
        var extras     = kANIMATABLE_CSS_PROPERTIES[aIndex][3];
        var discrete   = kANIMATABLE_CSS_PROPERTIES[aIndex][4];

        // create a style rule
        var s = "#testP { ";
        s += property + ": " + startValue + ";\n";
        s += "transition-property: " + property + ";\n";
        s += "transition-duration: 0.5s;\n";
        s += "transition-delay: 0s;\n";
        s += "transition-timing-function: linear;\n";
        s += extras;
        s += "}";
        style.textContent = s;

        // flush styles
        gCS(property);

        // set property to endValue
        p.setAttribute("style", property + ": " + endValue + "; ");

        // test for intermediate value
        setTimeout(function()
                   {
                     testsIntermediate[aIndex].step(function()
                                         {
                                           var cs = gCS(property);
                                           if (discrete) {
                                             assert_equals(cs, startValue);
                                           }
                                           else {
                                             assert_true((cs != startValue) && (null != cs));
                                           }
                                         });
                     testsIntermediate[aIndex].done();
                   }, 250);

        // test for final value
        setTimeout(function()
                   {
                     testsEnd[aIndex].step(function()
                                           {
                                             var cs = gCS(property);
                                             assert_equals(cs, endValue);
                                           }
                                          );
                     testsEnd[aIndex].done();
                     Scheduler(aIndex + 1);
                   }, 600);

      }

      // let's start
      Scheduler(0);

    </script>
  </body>
</html>
